<template>
  <div class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center p-4 sm:p-6">
    <div class="w-full max-w-md">
      <!-- 卡片容器 -->
      <div class="bg-white rounded-2xl shadow-xl overflow-hidden">
        <!-- 顶部装饰条 -->
        <div class="h-2 bg-gradient-to-r from-blue-500 to-indigo-600"></div>

        <!-- 内容区域 -->
        <div class="p-8 sm:p-10">
          <!-- Logo和标题 -->
          <div class="text-center mb-8">
            <div class="mx-auto h-12 w-12 rounded-full bg-blue-100 flex items-center justify-center mb-4">
              <svg class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
              </svg>
            </div>
            <h2 class="text-2xl font-bold text-gray-800">创建新账号</h2>
            <p class="text-gray-500 mt-2">加入我们，开启您的旅程</p>
          </div>

          <!-- 注册表单 -->
          <form class="space-y-5" @submit.prevent="handleRegister">
            <div>
              <label for="username" class="block text-sm font-medium text-gray-700 mb-1">用户名</label>
              <input id="username" v-model="form.username" type="text" required
                class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-all outline-none"
                placeholder="请输入用户名">
            </div>

            <div>
              <label for="password" class="block text-sm font-medium text-gray-700 mb-1">密码</label>
              <input id="password" v-model="form.password" type="password" required
                class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-all outline-none"
                placeholder="请输入密码">
            </div>

            <div>
              <label for="confirmPassword" class="block text-sm font-medium text-gray-700 mb-1">确认密码</label>
              <input id="confirmPassword" v-model="form.confirmPassword" type="password" required
                class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-all outline-none"
                placeholder="请再次输入密码" @blur="validatePasswordMatch">
              <p v-if="passwordError" class="mt-1 text-sm text-red-600">{{ passwordError }}</p>
            </div>

            <button type="submit" :disabled="loading"
              class="w-full flex justify-center items-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-white bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-300"
              :class="{ 'opacity-70 cursor-not-allowed': loading }">
              <svg v-if="loading" class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg"
                fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor"
                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
                </path>
              </svg>
              {{ loading ? '注册中...' : '立即注册' }}
            </button>
          </form>

          <!-- 登录入口 -->
          <div class="mt-6 text-center">
            <p class="text-sm text-gray-500">
              已有账号?
              <a @click.prevent="navigateTo('/login')"
                class="font-medium text-blue-600 hover:text-blue-500 cursor-pointer ml-1">
                立即登录
              </a>
            </p>
          </div>

          <!-- 隐私条款 -->
          <div class="mt-6 text-center text-xs text-gray-500">
            点击"注册"即表示您同意
            <a href="#" class="text-blue-600 hover:text-blue-500">服务条款</a>和
            <a href="#" class="text-blue-600 hover:text-blue-500">隐私政策</a>
          </div>
        </div>
      </div>

      <!-- 底部版权信息 -->
      <div class="mt-8 text-center text-sm text-gray-500">
        © 2023 您的公司. 保留所有权利.
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const { register } = useUserApi()

const form = reactive({
  username: '',
  password: '',
  confirmPassword: ''
})
const router = useRouter()

definePageMeta({
  layout: 'minimal',
  showHeader: false
});
// 方法
const navigateTo = (path: string) => {
  router.push(path)
}

const loading = ref(false)
const passwordError = ref('')

const validatePasswordMatch = () => {
  if (form.password && form.confirmPassword && form.password !== form.confirmPassword) {
    passwordError.value = '两次输入的密码不一致'
  } else {
    passwordError.value = ''
  }
}

const handleRegister = async () => {
  if (form.password !== form.confirmPassword) {
    passwordError.value = '两次输入的密码不一致'
    return
  }

  loading.value = true
  try {
    await register({
      username: form.username,
      password: form.password,
      role_id: 0
    })

    // 使用更美观的通知方式替代alert
    console.log('注册成功，请登录')
    navigateTo('/login')
  } catch (error) {
    // 显示API返回的错误信息
    passwordError.value = error + '' || '注册失败，请重试'
  } finally {
    loading.value = false
  }
}
</script>